<template>
	<view class="container">
		<!-- 提交加载 开始-->
		<u-loading-page :loading="pageLoading" loading-mode="spinner" loading-color="#FFFFFF" icon-size="36"
			font-size="12" color="#FFFFFF" loading-text="Loading···" bg-color="#00000050"></u-loading-page>
		<!-- 提交加载 结束-->
		<view class="heard">
		</view>
		<view class="main">
			<view class="case1">
				<view class="case-title">
					<u-row gutter="16">
						<u-col span="10">
							<view class="case-titleName">
								按班级排行
							</view>
						</u-col>
						<u-col span="2">
							<view class="case-info" @click="guize()">
								<image class="case-wenhao"
									src="https://www.afbeijing.net/static_resources/assets/wenhao.png" />
								<text class="case-guize">规则</text>
							</view>
						</u-col>
					</u-row>
				</view>
				<view class="case-biaoqian-main" v-if="data.qiansan.length!==0||data.xiaosan.length!==0">
					<view class="case-biaoqian-gundong">
						<view :class="k===bjNum?'case-biaoqian':'case-biaoqian unActive'" v-for="(i, k) in biaoqianlist"
							:key="k" @click="tabsClick(k,i)">
							<view :class="k===bjNum?'case-biaoqian-name':'case-biaoqian-name unNameactive'">
								{{i.clsName}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 前三名 -->
			<view class="caseqiansan" v-if='data.qita.length>0'>
				<view v-for="(items,j) in data.qiansan" :key="j">
					<u-transition :show="transitionShow" mode="fade-up" :duration="j===1?'500':j===0?'700':'900'">
						<view class="case2-qiansan">
							<view class="case2-qiansan-txk">
								<view :class="j===1?'txk1':j===0?'txk2':'txk3'">
									<u-avatar size='60'
										:src="items.headUrl||'https://www.afbeijing.net/static_resources/assets/jfheard.png'"></u-avatar>
								</view>
							</view>
							<view class="case2-qiansan-infobg">
								<view :class="j===1?'gjbg':j===0?'yjbg':'jjbg'">
									<view class="qiansan-name">
										<text class="qiansan-name-text">{{items.cnName}}</text>
									</view>
									<view class="qiansan-jifen">
										<image class="qiansan-jifen-icon"
											src="https://www.afbeijing.net/static_resources/assets/jifen3.png" />
										<view class="qiansan-jifen-text">
											<text class="">{{items.totalScore}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</u-transition>
				</view>
			</view>
			<view class="case2" v-if='data.qita.length>0'>
				<!-- 其他排行 -->
				<view v-for="(i,k) in data.qita" :key="k">
					<view :class="k === data.qita.length - 1? 'case-list last-module' : 'case-list'">
						<u-row gutter="16">
							<u-col span="6">
								<view class="case-list-inline">
									<text class="case-list-xuhao">{{k+4}}</text>
									<image class="case-list-icon"
										:src="i.headUrl||'https://www.afbeijing.net/static_resources/assets/panada.png'" />
									<text class="case-list-name">{{i.cnName}}</text>
								</view>
							</u-col>
							<u-col span="6">
								<view class="case-list-jifen">
									<image class="case-list-jifen-icon"
										src="https://www.afbeijing.net/static_resources/assets/jifen.png" />
									<text class="case-list-jifen-num">{{i.totalScore}}</text>
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
			</view>
			<view class="case3" v-if='data.xiaosan.length>0'>
				<!-- 其他排行 -->
				<view v-for="(i,k) in data.xiaosan" :key="k">
					<view :class="k === data.xiaosan.length - 1? 'case-list last-module' : 'case-list'">
						<u-row gutter="16">
							<u-col span="6">
								<view class="case-list-inline">
									<text class="case-list-xuhao">{{k+1}}</text>
									<image class="case-list-icon"
										:src="i.headUrl||'https://www.afbeijing.net/static_resources/assets/panada.png'" />
									<text class="case-list-name">{{i.cnName}}</text>
								</view>
							</u-col>
							<u-col span="6">
								<view class="case-list-jifen">
									<image class="case-list-jifen-icon"
										src="https://www.afbeijing.net/static_resources/assets/jifen.png" />
									<text class="case-list-jifen-num">{{i.totalScore}}</text>
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
			</view>
			<view class="empty" v-if="data.qiansan.length===0&&data.xiaosan.length===0">
				<u-empty
						mode="car"
						text="暂无排名"
						icon="https://www.afbeijing.net/static_resources/assets/empty.png"
						textColor="#808080"
						textSize="36rpx"
				>
				</u-empty>
			</view>
			<view style="height: 60rpx;" />
		</view>
	</view>
</template>

<script>
	import {
		queryClsRank,
		queryMyCls
	} from '../api/index.js';
	export default {
		data() {
			return {
				pageLoading: false,
				bjNum: 0,
				clsId: null, //班级id
				transitionShow: false,
				show: false,
				biaoqianlist: [
					{
						clsId: null,
						clsName: "班级",
						learnProgress: 0
					}
				],
				data: {
					qiansan: [],
					qita: [],
					xiaosan: [

					]
				}
			}
		},
		onShow: function() {
			this.transitionShow = true
		},
		onHide: function() {
			this.transitionShow = false
		},
		onReady() {
			this.clsList()
			this.queryList()
		},
		methods: {
			//查询排行榜
			clsList() {
				var jsonData = {
					clsId: this.clsId
				};
				queryClsRank(jsonData).then(response => {
					console.log('查询排行榜:', response)
					this.data.qiansan = []
					this.data.qita = []
					this.data.xiaosan = []
					if (response.code === 0) {
						console.log(response)
						if (response.data.length >= 3) {
							// 截取数组的前三个元素作为前三名
							let topThree = response.data.slice(0, 3);
							// 调整排序为第一个是第二名，第二个是第一名，第三个是第三名
							this.data.qiansan = [topThree[1], topThree[0], topThree[2]];
							// 截取数组从索引 3 开始到末尾的元素作为其他排名
							this.data.qita = response.data.slice(3);
						} else {
							// 如果数组长度小于 3，将整个数组作为前三名，其他排名为空数组
							this.data.xiaosan = response.data.slice();
							this.data.qiansan = [];
							this.data.qita = [];
						}
					}
				})
			},
			//切换班级
			tabsClick(e, key) {
				console.log(e)
				this.bjNum = e
				this.clsId = key.clsId
				this.clsList() //刷新排名
			},
			//查询班级
			queryList() {
				var jsonData = {
					clsId: ''
					// this.clsCrsId
				};
				queryMyCls(jsonData).then(response => {
					if (response.code === 0) {
						console.log(response)
						this.biaoqianlist = response.data
					}
				})
			},
			guize() {
				uni.navigateTo({
					url: '/src/views/pageHome/paihangbang/guize/index'
				});
			},
			goToRegister(e) {
				console.log(e)
				switch (e) {
					case 0:
						// 我的
						uni.switchTab({
							url: '/src/views/pageMain/pageMine/index'
						});
						break;
					case 1:
						// 岛屿
						uni.navigateTo({
							url: '/src/views/pageHome/index'
						});
						break;
					case 2:
						// 排行傍
						uni.navigateTo({
							url: '/src/views/pageHome/paihangbang/index' // 这里替换成你实际要跳转的页面路径
						});
						break;
					case 3:
						// 好课推荐
						uni.navigateTo({
							url: '/src/views/pageHome/haoketuijian/index' // 这里替换成你实际要跳转的页面路径
						});
						break;
					default:
						break;
				}
			},
			showPopup() {
				this.show = !this.show;
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/static/styles/variables.scss";

	.container {
		position: relative;
		background-color: #F2F2F2;
		height: 100vh;
	}

	.heard {
		height: 480rpx;
		background-image: url(#{$bgImageUrl}/assets/jfheard.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.main {
		margin-top: -80rpx;
		padding-top: 80rpx;
		padding-left: 60rpx;
		padding-right: 60rpx;
		background-color: #F2F2F2;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
	}

	.case1 {
		margin-top: -40rpx;
	}

	.case-title {
		margin-bottom: 20rpx;
	}

	.case-titleName {
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 30rpx;
	}

	.case-info {
		width: 120rpx;
		text-align: center;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 24rpx;
		line-height: 40rpx;
		color: #FFB607;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.case-wenhao {
		width: 28rpx;
		height: 26rpx;
		margin-right: 10rpx;
	}

	.case-guize {
		font-weight: 400;
		font-size: 24rpx;
		color: #4D4D4D;
	}

	.case-biaoqian-main {
		width: 100%;
		position: relative;
	}

	.case-biaoqian-main::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		width: 10%;
		height: 100%;
		background: linear-gradient(to right, rgba(242, 242, 242, 0), rgba(242, 242, 242, 0.8));
		/* 虚化渐变效果 */
	}

	.case-biaoqian-gundong {
		width: 100%;
		display: flex;
		align-items: center;
		overflow-x: auto;
		/* 允许横向滚动 */
		white-space: nowrap;
		/* 不换行 */
		position: relative;
	}

	.case-biaoqian {
		margin-bottom: 20rpx;
		width: 228rpx;
		height: 40rpx;
		background: #FFB607;
		border-radius: 20rpx;
		text-align: center;
		padding-left: 30rpx;
		padding-right: 30rpx;
		margin-right: 10rpx;
	}

	.unActive {
		background: #E5E5E5;
	}

	.case-biaoqian-name {
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 20rpx;
		color: #FFFFFF;
		line-height: 40rpx;
	}

	.unNameactive {
		color: #4D4D4D;
	}

	.caseqiansan {
		display: flex;
		align-items: center;
		justify-content: center;
		/* background-color: blue; */
		margin-top: 30rpx;
	}

	.case2 {
		margin-top: -50rpx;
		padding-left: 60rpx;
		padding-right: 60rpx;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		background-color: #ffffff;
		border-radius: 30rpx;
		position: relative;
	}

	.case3 {
		margin-top: 50rpx;
		padding-left: 60rpx;
		padding-right: 60rpx;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		background-color: #ffffff;
		border-radius: 30rpx;
		position: relative;
	}

	.case2-qiansan {
		width: 170rpx;
		margin-top: 40rpx;
	}

	.case2-qiansan-infobg {
		margin-top: -30rpx;
		position: relative;
	}

	.qiansan-name {
		padding-top: 30%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.qiansan-name-text {
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 20rpx;
		color: #ffffff;
	}

	.qiansan-jifen {
		padding-top: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.qiansan-jifen-icon {
		width: 20rpx;
		height: 20rpx;
		padding-right: 10rpx;
	}

	.qiansan-jifen-text {
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 22rpx;
		color: #ffffff;
		line-height: 38rpx;
	}

	.case2-qiansan-txk {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.txk1 {
		height: 145rpx;
		width: 145rpx;
		background-image: url(#{$bgImageUrl}/assets/txk1.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		margin-top: -30rpx;

		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 20rpx;
		padding-left: 3rpx;

	}

	.gjbg {
		height: 180rpx;
		width: 170rpx;
		background-image: url(#{$bgImageUrl}/assets/gj.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		margin-top: -30rpx;
	}

	.txk2 {
		height: 145rpx;
		width: 145rpx;
		background-image: url(#{$bgImageUrl}/assets/txk2.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;

		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 20rpx;
		padding-left: 3rpx;

	}

	.jjbg {
		height: 180rpx;
		width: 170rpx;
		background-image: url(#{$bgImageUrl}/assets/jj.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.txk3 {
		height: 145rpx;
		width: 145rpx;
		background-image: url(#{$bgImageUrl}/assets/txk3.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;

		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 20rpx;
		padding-left: 3rpx;

	}

	.yjbg {
		height: 180rpx;
		width: 170rpx;
		background-image: url(#{$bgImageUrl}/assets/yj.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.case-list {
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		width: 100%;
		background: #FFFFFF;
		border-bottom: 1px dashed #cccccc;
	}

	.last-module {
		border-bottom: none;
	}

	.case-list-inline {
		display: flex;
		align-items: center;
	}

	.case-list-xuhao {
		padding-right: 20rpx;
		font-weight: 400;
		font-size: 22rpx;
		color: #333333;
	}

	.case-list-icon {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
	}

	.case-list-name {
		padding-left: 20rpx;
		font-weight: 400;
		font-size: 22rpx;
		color: #333333;
	}

	.case-list-jifen {
		text-align: right;
		font-weight: 400;
		font-size: 22rpx;
		color: #333333;
		line-height: 43rpx;
	}

	.case-list-jifen-icon {
		width: 20rpx;
		height: 20rpx;
		padding-right: 10rpx;
	}
	.empty{
		padding-top: 130rpx;
		height: 70%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>